<template>
  <div class="canvas">
    <div class="panel" v-if="dataList == 0">
      <div class="panel-title">报价投标</div>
      <div class="panel-note" v-for="item in noPriceOrder" :key="item.id" @click="jumpTo(item.url)">
        <div class="panel-note-line">{{ item.name }}</div>
        <div class="panel-note-line">{{ item.dt }}</div>
        <div class="panel-note-line">{{ item.type }}</div>
      </div>
      <!-- <div class="panel-firstLine">
        <div class="panel-firstLine-item" style="width: 50%">项目名称</div>
        <div class="panel-firstLine-item" style="width: 30%">截止日期</div>
        <div class="panel-firstLine-item" style="width: 20%">类型</div>
      </div>
      <div
        class="panel-line"
        v-for="item in noPriceOrder"
        :key="item.id"
        @click="jumpTo(item.url)"
      >
        <div class="panel-line-item" style="width: 50%">{{ item.name }}</div>
        <div class="panel-line-item" style="width: 30%">{{ item.dt }}</div>
        <div class="panel-line-item" style="width: 20%">{{ item.type }}</div>
      </div> -->
    </div>
    <div class="panel" v-else-if="dataList == 1">
      <div class="panel-title">报价投标 - 结果</div>
      <div class="panel-note" v-for="item1 in win" :key="item1.id" @click="jumpTo(item1.url)">
        <div class="panel-note-line">{{ item1.name }}</div>
        <div class="panel-note-line">{{ item1.dt }}</div>
        <div class="panel-note-line">{{ item1.type }}</div>
        <div class="panel-note-line">{{ item1.result }}</div>
      </div>
      <!-- <div class="panel-firstLine">
        <div class="panel-firstLine-item" style="width: 35%">项目名称</div>
        <div class="panel-firstLine-item" style="width: 27.5%">截止日期</div>
        <div class="panel-firstLine-item" style="width: 15%">类型</div>
        <div class="panel-firstLine-item" style="width: 22.5%">结果</div>
      </div>
      <div
        class="panel-line"
        v-for="item1 in win"
        :key="item1.id"
        @click="jumpTo(item1.url)"
      >
        <div class="panel-line-item" style="width: 35%">{{ item1.name }}</div>
        <div class="panel-line-item" style="width: 27.5%">{{ item1.dt }}</div>
        <div class="panel-line-item" style="width: 15%">{{ item1.type }}</div>
        <div class="panel-line-item" style="width: 22.5%">
          {{ item1.result }}
        </div>
      </div> -->
    </div>
    <div class="panel" v-else-if="dataList == 2">
      <div class="panel-title">待发货订单</div>
      <div class="panel-note" v-for="item2 in unSendOrder" :key="item2.id" @click="jumpTo(item2.url)">
        <div class="panel-note-line">{{ item2.name }}</div>
        <div class="panel-note-line">
          {{ item2.number }}
        </div>
        <div class="panel-note-line">{{ item2.sum }}</div>
        <div class="panel-note-line">
          {{ item2.result }}
        </div>
        <div class="panel-note-line">{{ item2.dt }}</div>
      </div>
      <!-- <div class="panel-firstLine">
        <div class="panel-firstLine-item" style="width: 25%">物料名称</div>
        <div class="panel-firstLine-item" style="width: 12.5%">采购数量</div>
        <div class="panel-firstLine-item" style="width: 20%">总金额(元）</div>
        <div class="panel-firstLine-item" style="width: 12.5%">发货状态</div>
        <div class="panel-firstLine-item" style="width: 30%">交货日期</div>
      </div>
      <div
        class="panel-line"
        v-for="item2 in unSendOrder"
        :key="item2.id"
        @click="jumpTo(item2.url)"
      >
        <div class="panel-line-item" style="width: 25%">{{ item2.name }}</div>
        <div class="panel-line-item" style="width: 12.5%">
          {{ item2.number }}
        </div>
        <div class="panel-line-item" style="width: 20%">{{ item2.sum }}</div>
        <div class="panel-line-item" style="width: 12.5%">
          {{ item2.result }}
        </div>
        <div class="panel-line-item" style="width: 30%">{{ item2.dt }}</div>
      </div> -->
    </div>
    <div class="panel" v-else-if="dataList == 3">
      <div class="panel-title">采购订单</div>
      <div class="panel-note" v-for="item3 in buyOrder" :key="item3.id" @click="jumpTo(item3.url)">
        <div class="panel-note-line">{{ item3.name }}</div>
        <div class="panel-note-line">
          {{ item3.number }}
        </div>
        <div class="panel-note-line">{{ item3.sum }}</div>
        <div class="panel-note-line">
          {{ item3.result }}
        </div>
        <div class="panel-note-line">{{ item3.dt }}</div>
      </div>
      <!-- <div class="panel-firstLine">
        <div class="panel-firstLine-item" style="width: 25%">物料名称</div>
        <div class="panel-firstLine-item" style="width: 12.5%">采购数量</div>
        <div class="panel-firstLine-item" style="width: 20%">总金额(元）</div>
        <div class="panel-firstLine-item" style="width: 12.5%">发货状态</div>
        <div class="panel-firstLine-item" style="width: 30%">交货日期</div>
      </div>
      <div
        class="panel-line"
        v-for="item3 in buyOrder"
        :key="item3.id"
        @click="jumpTo(item3.url)"
      >
        <div class="panel-line-item" style="width: 25%">{{ item3.name }}</div>
        <div class="panel-line-item" style="width: 12.5%">
          {{ item3.number }}
        </div>
        <div class="panel-line-item" style="width: 20%">{{ item3.sum }}</div>
        <div class="panel-line-item" style="width: 12.5%">
          {{ item3.result }}
        </div>
        <div class="panel-line-item" style="width: 30%">{{ item3.dt }}</div>
      </div> -->
    </div>
    <div class="panel" v-else-if="dataList == 4">
      <div class="panel-title">发货通知单</div>
      <div class="panel-note" v-for="item4 in noticeOrder" :key="item4.id" @click="jumpTo(item4.url)">
        <div class="panel-note-line">{{ item4.name }}</div>
        <div class="panel-note-line">{{ item4.dt }}</div>
        <div class="panel-note-line">{{ item4.pihao }}</div>
        <div class="panel-note-line">{{ item4.result }}</div>
      </div>
      <!-- <div class="panel-firstLine">
        <div class="panel-firstLine-item" style="width: 40%">项目名称</div>
        <div class="panel-firstLine-item" style="width: 30%">发货日期</div>
        <div class="panel-firstLine-item" style="width: 15%">批号</div>
        <div class="panel-firstLine-item" style="width: 15%">收货状态</div>
      </div>
      <div
        class="panel-line"
        v-for="item4 in noticeOrder"
        :key="item4.id"
        @click="jumpTo(item4.url)"
      >
        <div class="panel-line-item" style="width: 40%">{{ item4.name }}</div>
        <div class="panel-line-item" style="width: 30%">{{ item4.dt }}</div>
        <div class="panel-line-item" style="width: 15%">{{ item4.pihao }}</div>
        <div class="panel-line-item" style="width: 15%">{{ item4.result }}</div>
      </div> -->
    </div>
    <div class="panel" v-else>
      <div class="panel-title">采购合同</div>
      <div class="panel-note" v-for="item5 in buyContract" :key="item5.id" @click="jumpTo(item5.url)">
        <div class="panel-note-line">{{ item5.name }}</div>
        <div class="panel-note-line">{{ item5.type }}</div>
        <div class="panel-note-line">{{ item5.number }}</div>
        <div class="panel-note-line">{{ item5.dt }}</div>
      </div>
      <!-- <div class="panel-firstLine">
        <div class="panel-firstLine-item" style="width: 40%">合同名称</div>
        <div class="panel-firstLine-item" style="width: 15%">合同类型</div>
        <div class="panel-firstLine-item" style="width: 15%">合同金额(元)</div>
        <div class="panel-firstLine-item" style="width: 30%">生效时间</div>
      </div>
      <div
        class="panel-line"
        v-for="item5 in buyContract"
        :key="item5.id"
        @click="jumpTo(item5.url)"
      >
        <div class="panel-line-item" style="width: 40%">{{ item5.name }}</div>
        <div class="panel-line-item" style="width: 15%">{{ item5.type }}</div>
        <div class="panel-line-item" style="width: 15%">{{ item5.number }}</div>
        <div class="panel-line-item" style="width: 30%">{{ item5.dt }}</div>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Watch,
  Inject,
  Emit,
} from "vue-property-decorator";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";

@Component({
  name: "appList",
  components: {},
})
export default class appList extends Vue {
  noPriceOrder: any = [];
  win: any = [];
  unSendOrder: any = [];
  buyOrder: any = [];
  noticeOrder: any = [];
  buyContract: any = [];
  user: any;
  dataList: string = "0";

  created() {
    let user: any = window.sessionStorage.getItem("user");
    if (user) {
      this.user = JSON.parse(user);
    } else {
      this.user = { id: "", name: "" };
    }
  }

  jumpTo(url) {
    if (url) {
      window.location = url;
    }
  }

  mounted() {
    let that = this;
    setTimeout(async function () {
      that.dataList = that.$route.query.dataList;
      debugger;

      if (that.dataList == "0") {
        await Axios.get(
          "/api/zcxtHomePage/getZhaoBiaoXinXi?type=1&userId=" +
            that.user.id
        ).then((res: any) => {
          debugger;
          if (res.errcode != "0") {
            alert("获取招标失败");
          } else if (res.errmsg == "无数据") {
            alert("招标无数据");
          } else {
            that.noPriceOrder = [];
            for (var item in res.data.liebiao) {
              that.noPriceOrder.push({
                id: item,
                name: res.data.liebiao[item].XMName,
                dt: res.data.liebiao[item].createdTime,
                url: res.data.liebiao[item].url,
                type: res.data.liebiao[item].leixing,
              });
            }
          }
        });
      } else if (that.dataList == "1") {
        await Axios.get(
          "/api/zcxtHomePage/getZhongBiaoXinXi?type=1&userId=" +
            that.user.id
        ).then((res: any) => {
          debugger;
          if (res.errcode != "0") {
            alert("获取中标失败");
          } else if (res.errmsg == "无数据") {
            alert("中标无数据");
          } else {
            that.win = [];
            for (var item in res.data.liebiao) {
              that.win.push({
                id: item,
                name: res.data.liebiao[item].XMName,
                dt: res.data.liebiao[item].createdTime,
                url: res.data.liebiao[item].url,
                type: res.data.liebiao[item].leixing,
                result: res.data.liebiao[item].Result,
              });
            }
          }
        });
      } else if (that.dataList == "2") {
        await Axios.get(
          "/api/zcxtHomePage/getDaiFaHuoDingDan?type=1&userId=" +
            that.user.id
        ).then((res: any) => {
          debugger;
          if (res.errcode != "0") {
            alert("获取待发货订单失败");
          } else if (res.errmsg == "无数据") {
            alert("待发货订单无数据");
          } else {
            that.unSendOrder = [];
            for (var item in res.data.liebiao) {
              that.unSendOrder.push({
                id: item,
                name: res.data.liebiao[item].materialName,
                number: res.data.liebiao[item].count,
                sum: res.data.liebiao[item].sumPrice,
                result: res.data.liebiao[item].status,
                dt: res.data.liebiao[item].deliveryDate,
                url: res.data.liebiao[item].url,
              });
            }
          }
        });
      } else if (that.dataList == "3") {
        await Axios.get(
          "/api/zcxtHomePage/getCGDD?type=1&userId=" +
            that.user.id
        ).then((res: any) => {
          debugger;
          if (res.errcode != "0") {
            alert("获取采购订单失败");
          } else if (res.errmsg == "无数据") {
            alert("采购订单无数据");
          } else {
            that.buyOrder = [];
            for (var item in res.data.liebiao) {
              that.buyOrder.push({
                id: item,
                name: res.data.liebiao[item].materialName,
                number: res.data.liebiao[item].count,
                sum: res.data.liebiao[item].sumPrice,
                result: res.data.liebiao[item].status,
                dt: res.data.liebiao[item].deliveryDate,
                url: res.data.liebiao[item].url,
              });
            }
          }
        });
      } else if (that.dataList == "4") {
        await Axios.get(
          "/api/zcxtHomePage/getShipments?type=1&userId=" +
            that.user.id
        ).then((res: any) => {
          debugger;
          if (res.errcode != "0") {
            alert("获取发货通知单失败");
          } else if (res.errmsg == "无数据") {
            alert("发货通知单无数据");
          } else {
            that.noticeOrder = [];
            for (var item in res.data.liebiao) {
              that.noticeOrder.push({
                id: item,
                name: res.data.liebiao[item].xmName,
                pihao: res.data.liebiao[item].ShipmentsNo,
                result: res.data.liebiao[item].shzt,
                dt: res.data.liebiao[item].fhrq,
                url: res.data.liebiao[item].url,
              });
            }
          }
        });
      } else {
        await Axios.get(
          "/api/zcxtHomePage/getCGHT?type=1&userId=" +
            that.user.id
        ).then((res: any) => {
          debugger;
          if (res.errcode != "0") {
            alert("获取采购合同失败");
          } else if (res.errmsg == "无数据") {
            alert("采购合同无数据");
          } else {
            that.buyContract = [];
            for (var item in res.data.liebiao) {
              that.buyContract.push({
                id: item,
                name: res.data.liebiao[item].contractNames,
                type: res.data.liebiao[item].ContractType,
                number: res.data.liebiao[item].ContractMoney,
                dt: res.data.liebiao[item].createdTime,
                url: res.data.liebiao[item].url,
              });
            }
          }
        });
      }
    }, 200);
  }
}
</script>
<style lang="less" scoped>
.canvas {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f7f7fa;
  padding: 5px 5px 0;
}

.panel {
  width: calc(100vw - 10px);
  border-top: 2px solid rgba(161, 218, 255, 1);
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  height: calc(100vh - 12px);
  overflow-x: hidden;
  overflow-y: auto;

  .panel-title {
    font-size: 20px;
    padding: 10px;
    font-weight: 700;
    text-align: left;
  }

  .panel-note{
    width: calc(100% - 20px);
    margin: 5px 10px;
    border-radius: 4px;
    border: 1px solid #EEE;
    padding: 10px 20px;
    background-color: #FEFEFE;

    .panel-note-line{
      text-align: left;
      padding: 5px 0;
      height: 20px;
    }
  }

  .panel-firstLine {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 0;
    color: #999;
    font-size: 12px;

    .panel-firstLine-item {
      padding: 0 10px;
      text-align: left;
    }
  }
  .panel-line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px;
    color: #000;
    font-size: 14px;

    .panel-line-item {
      padding: 0 10px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
